﻿@using System.Configuration
@{
    ViewBag.Title = "List";
}
<script src="@Url.Content("~/Scripts/grid.locale-es.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.jqGrid.min.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/themes/ui.jqgrid.css")" rel="stylesheet" type="text/css" />

<script type="text/javascript">
    var URLBase = @Html.Raw(Json.Encode(ConfigurationManager.AppSettings["baseURL"]));
    jQuery(document).ready(function () {
        var getColumnIndexByName = function (grid, columnName) {
            var cm = grid.jqGrid('getGridParam', 'colModel');
            for (var i = 0, l = cm.length; i < l; i++) {
                if (cm[i].name === columnName) {
                    return i; // return the index
                }
            }
            return -1;
        },
        firstButtonColumnIndex, buttonNames = {}, 
        BaseUrl = 'http://' + top.location.host + URLBase,
        productSelectedCallback = function (id, action) {
                        $("#loading").show();
                        //var BaseUrl = 'http://' + top.location.host;
                        $.ajax({
                            url: BaseUrl + '/Employees/ManageSelectedGridItem/',
                            type: "POST",
                            data: { "rowid": id, "action": action }
                        })
                        .success(function (result) {
                            // Display the section contents.
                            $("#loading").hide();
                            $('#sectionContents').html(result);
                        })
                        .error(function (xhr, status) {
                            alert(xhr.responseText);
                        });
        };
        jQuery("#list").jqGrid({
            url: URLBase + '/Employees/GetEmployeeList/',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['Nombre', 'Apellido', 'Nro. Empleado', 'Nro. DNI', 'Nro. CUIL', '', ''],
            colModel: [
                      { name: 'Name', index: 'Name', width: 275, align: 'left', editable: true },
                      { name: 'Surname', index: 'Surname', width: 275, align: 'left', editable: true },
                      { name: 'FileNumber', index: 'FileNumber', width: 100, align: 'left', editable: true },
                      { name: 'DNInumber', index: 'DNInumber', width: 100, align: 'left', editable: true },
                      { name: 'CUILnumber', index: 'CUILnumber', width: 100, align: 'left', editable: true },
                      { name: 'edit', width: 18, sortable: false, search: false,
                          formatter: function () {
                              return "<span class='ui-icon ui-icon-pencil'></span>"
                          }
                      },
                      { name: 'detail', width: 18, sortable: false, search: false,
                          formatter: function () {
                              return "<span class='ui-icon ui-icon-document'></span>"
                          }
                      }],
            beforeSelectRow: function (rowid, e) {
                var iCol = $.jgrid.getCellIndex(e.target);
                if (iCol >= firstButtonColumnIndex) {
                    productSelectedCallback(rowid, buttonNames[iCol]);
                }
                return (iCol >= firstButtonColumnIndex) ? false : true;
            },
            pager: '#pager',
            rowNum: 10,
            rowList: [5, 10, 20, 50],
            sortname: 'Nombre',
            sortorder: 'desc',
            gridview: true,
            shrinkToFit: false,
            autowidth: true,
            caption: 'Empleados'
        });
        firstButtonColumnIndex = getColumnIndexByName(jQuery("#list"), 'edit');
        buttonNames[firstButtonColumnIndex] = 'Edit';
        buttonNames[firstButtonColumnIndex + 1] = 'Details';
        $("#list").navGrid("#pager", { edit: false, add: false, del: false });
    }); 
</script>
<div class="line"></div>
         
<article id="article1">
    <h2>Listado de empleados</h2>
                    
    <div class="line"></div>
                    
    <div class="articleBody clear">
        <table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
        <div id="pager" class="scroll" style="text-align:center;"></div>
        <p>
            @Html.ActionLink("Agregar empleado", "Create")
        </p>
    </div>
</article>
<div id='sectionContents'></div>